<template>
	<view>
		<input placeholder="搜索用户" @click="toSearch" class="search" />
		<scroll-view scroll-y="" :show-scrollbar="false" class="scroll">
			<!-- 轮播图 -->
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<image src="/static/swaper/banner1.webp" mode="" style="width:94vw;height: 100%;"></image>
				</swiper-item>
				<swiper-item>
					<image src="/static/swaper/banner2.webp" mode="" style="width: 94vw;height: 100%;"></image>
				</swiper-item>
			</swiper>
			<!-- 金刚区 -->
			<view class="gang">
				<view class="gang-item">
					<image src="/static/gang/ec151c4263f2c23490c8bd484b41d2d.png" mode="" class="gang-img"></image>
					<text class="gang-txt">设备情况</text>
				</view>
				<view class="gang-item">
					<image src="/static/gang/fc3cd0d920d8134d883ff2503f34812.png" mode="" class="gang-img"></image>
					<text class="gang-txt">预警信息</text>
				</view>
				<view class="gang-item">
					<image src="/static/gang/29a42baac9be163e1f512de2ea3bb13.png" mode="" class="gang-img"></image>
					<text class="gang-txt">用水分析</text>
				</view>
				<view class="gang-item">
					<image src="/static/gang/3e14229c86cdc3ec4c6cde0e1017161.png" mode="" class="gang-img"></image>
					<text class="gang-txt">地图显示</text>
				</view>
			</view>
			<!-- 设备管理，报警管理 -->
			<view class="buts">
				<button class="device" type="primary">设备管理</button>
				<button class="alarm" type="warn">报警管理</button>
			</view>
			<!-- 报警记录 -->
			<view class="alertLogs">
				<view class="chart-title">报警记录</view>
				<qiun-data-charts type="line" :opts="alertopts" :chartData="alertData" />
			</view>
			<!-- 灌溉亩数 -->
			<view class="alertLogs">
				<view class="chart-title">灌溉亩数</view>
				<qiun-data-charts type="column" :opts="acreageopts" :chartData="acreageData" />
			</view>
			<!-- 水井数量 -->
			<view class="alertLogs">
				<view class="chart-title">水井数量</view>
				<qiun-data-charts type="bar" :opts="wellNumopts" :chartData="wellNumData" />
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onReady
	} from "@dcloudio/uni-app"
	// 报警记录折线图
	let alertData = ref({})
	// 灌溉亩数
	let acreageData = ref({})
	// 水井数量
	let wellNumData = ref({})
	// 报警记录者折线图配置
	let alertopts = ref({
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [15, 10, 0, 15],
		enableScroll: false,
		legend: {},
		xAxis: {
			disableGrid: true
		},
		yAxis: {
			gridType: "dash",
			dashLength: 2
		},
		extra: {
			line: {
				type: "straight",
				width: 2,
				activeType: "hollow"
			}
		}
	})
	// 灌溉亩数柱状图配置
	let acreageopts = ref({
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [15, 15, 0, 5],
		enableScroll: false,
		legend: {},
		xAxis: {
			disableGrid: true
		},
		yAxis: {
			data: [{
				min: 0
			}]
		},
		extra: {
			column: {
				type: "stack",
				width: 30,
				activeBgColor: "#000000",
				activeBgOpacity: 0.08,
				labelPosition: "center"
			}
		}
	})
	// 水井数量条状图配置
	let wellNumopts = ref({
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [15, 30, 0, 5],
		enableScroll: false,
		legend: {},
		xAxis: {
			boundaryGap: "justify",
			disableGrid: false,
			min: 0,
			axisLine: false,
			max: 40
		},
		yAxis: {},
		extra: {
			bar: {
				type: "group",
				width: 30,
				meterBorde: 1,
				meterFillColor: "#FFFFFF",
				activeBgColor: "#000000",
				activeBgOpacity: 0.08,
				linearType: "custom",
				barBorderCircle: true,
				seriesGap: 2,
				categoryGap: 2
			}
		}
	})
	onReady(() => {
		// 报警折线图获取数据
		getalertData()
		// 灌溉亩数获取数据
		getacreageData()
		// 水井数量获取数据
		getwellNumData()
	})
	// 跳转到搜索页
	function toSearch() {
		uni.navigateTo({
			url: "/pages/searchPage/searchPage"
		})
	}
	// 获取报警折线图
	function getalertData() {
		setTimeout(() => {
			//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			let res = {
				categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
				series: [{
						name: "成交量A",
						data: [35, 8, 25, 37, 4, 20]
					},
					{
						name: "成交量B",
						data: [70, 40, 65, 100, 44, 68]
					},
					{
						name: "成交量C",
						data: [100, 80, 95, 150, 112, 132]
					}
				]
			};
			alertData.value = JSON.parse(JSON.stringify(res));
		}, 500);

	}
	// 灌溉亩数折线图
	function getacreageData() {
		setTimeout(() => {
			//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			let res = {
				categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
				series: [{
						name: "目标值",
						textColor: "#FFFFFF",
						data: [35, 36, 31, 33, 13, 34]
					},
					{
						name: "完成量",
						textColor: "#FFFFFF",
						data: [18, 27, 21, 24, 6, 28]
					}
				]
			};
			acreageData.value = JSON.parse(JSON.stringify(res));
		}, 500);
	}
	// 水井数量柱状图
	function getwellNumData() {
		setTimeout(() => {
			//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			let res = {
				categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
				series: [{
						name: "目标值",
						data: [35, 36, 31, 33, 13, 34]
					},
					{
						name: "完成量",
						data: [18, 27, 21, 24, 6, 28]
					}
				],

			};
			wellNumData.value = JSON.parse(JSON.stringify(res));
		}, 500);
	}
</script>

<style scoped>
	.search {
		box-sizing: border-box;
		width: 90vw;
		margin: 30rpx;
		border: 1px solid #ccc;
		border-radius: 20rpx;
		padding-left: 30rpx;
	}

	.scroll {
		box-sizing: border-box;
		width: 100vw;
		padding: 2vw;
		background-color: #eee;
	}

	.gang {
		width: 96vw;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: white;
		margin: 10px 0;
		padding: 10px 0;
		border-radius: 4px;
	}

	.gang-item {
		/* width: 20vw; */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-self: center;
	}

	.gang-img {
		width: 40px;
		height: 40px;
	}

	.gang-txt {
		font-size: 12PX;
	}

	.buts {
		width: 96vw;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.alertLogs {
		padding: 10px 0;
	}

	.chart-title {

		text-align: center;
		font-size: 16px;
		margin: 0 auto;
	}
</style>